<template>
 <div class="box">
  <Header title="个人中心"></Header>
    <div class="title-box">
      <div class="photo-box">
        <img src="@/assets/temporary/photo.png" alt="">
      </div>
      <p>王小明</p>
    </div>
    <div class="mine-list-box">
      <div class="mine-list-item">
        <div>
          <img src="@/assets/images/mine-info.png" alt="">
          我的信息
        </div>
        <van-icon name="arrow" color="#666"/>
      </div>
      <div class="mine-list-item">
        <div>
          <img src="@/assets/images/mine-trip.png" alt="">
          我的行程
        </div>
        <van-icon name="arrow" color="#666"/>
      </div>
      <router-link to="complaints" class="mine-list-item">
        <div>
          <img src="@/assets/images/mine-complaints.png" alt="">
          我的投诉
        </div>
        <van-icon name="arrow" color="#666"/>
      </router-link>
      <div class="mine-list-item">
        <div>
          <img src="@/assets/images/mine-collection.png" alt="">
          我的收藏
        </div>
        <van-icon name="arrow" color="#666"/>
      </div>
    </div>
  <Nav :Active="5"></Nav>
 </div>
</template>

<script>
import Header from "@/components/Header/Header.vue";
import Nav from "@/components/Nav/Nav.vue";
export default {
  name:'Mine',
  components: { Header, Nav },
}
</script>

<style lang="less" scoped>
.box{
  background-color: #f2f2f2;
  padding-left:0;
  padding-right:0;
}
.title-box{
  height: 150/7.5vw;
  padding:0 20/7.5vw;
  margin-bottom:20/7.5vw;
  display: flex;
  align-items: center;
  background-color: #fff;
  .photo-box{
    width: 110/7.5vw;
    height: 110/7.5vw;
    margin-right:30/7.5vw;
    border-radius: 50%;
    overflow: hidden;
    img{
      display: block;
      width: 100%;
    }
  }
  p{
    font-size: 36/7.5vw;
    color: #666;
  }
}
.mine-list-box{
  .mine-list-item{
    padding:0 20/7.5vw;
    height: 100/7.5vw;
    display: flex;
    justify-content:space-between;
    align-items: center;
    margin-bottom: 1px;
    background-color: #fff;
    img{
      width: 45/7.5vw;
      vertical-align: middle;
    }
    p{
      font-size: 32/7.5vw;
      color: #333;
    }
  }
}
</style>